<template>
  <!-- 没有子菜单的 -->
  <el-menu-item
    :index="menuitem.menuUrl"
    v-if="!menuitem.children || menuitem.children.length === 0"
  >
    <el-icon :size="20" v-if="menuitem.icon">
      <component v-bind:is="menuitem.icon" />
    </el-icon>
    <template #title>{{ menuitem.menuName }}</template>
  </el-menu-item>
  <!-- 有子菜单的 -->
  <el-sub-menu :index="menuitem.menuUrl" v-else>
    <template #title>
      <el-icon :size="20" v-if="menuitem.icon">
        <component v-bind:is="menuitem.icon" />
      </el-icon>
      <span>{{ menuitem.menuName }}</span>
    </template>
    <el-menu-item-group>
      <!-- 递归本组件 -->
      <Menu-Item v-for="item in menuitem.children" :key="item.menuId" :menudata="item" />
    </el-menu-item-group>
  </el-sub-menu>
</template>
<script setup>
import { ref, onMounted, defineProps } from 'vue'
import MenuItem from './menuItem.vue'

const menuitem = ref({})
const props = defineProps({
  menudata: {
    type: Object,
    default: {},
  },
})
onMounted(() => {
  menuitem.value = props.menudata
})
</script>

<style lang="scss" scoped>
:deep(.el-menu-item) {
  font-family: PingFang SC !important;
  font-size: 14px !important;
}

:deep(.el-menu-item-group__title) {
  display: none !important;
}
</style>